<template>
    <div>
        <div ref="myEchart" style="width: 100%; height: 700px; margin: 20px auto" id="main"></div>
        <div style="text-align: center; padding: 10px">
            详细说明/文档：
            <a
                href="https://echarts.apache.org/zh/index.html"
                target="_blank"
                rel="noopener noreferrer">
                点击进入
            </a>
        </div>
        <div style="text-align: center; padding: 10px">
            <a target="_blank" href="https://echarts.apache.org/examples/zh/index.html">更多示例</a>
        </div>
    </div>
</template>

<script lang="ts" setup>
// 引入echarts
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            label: {
                show: true,
            },
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
        },
    },
    calculable: true,
    legend: {
        data: ['2022预算', '2023预算'],
        itemGap: 5,
    },
    grid: {
        top: '12%',
        left: '1%',
        right: '10%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: [
                'a1',
                'b1',
                'c1',
                'd1',
                'e1',
                'f1',
                'g1',
                'h1',
                'i1',
                'j1',
                'a2',
                'b2',
                'c2',
                'd2',
                'e2',
                'f2',
                'g2',
                'h2',
                'i2',
                'j2',
            ],
        },
    ],
    yAxis: [
        {
            type: 'value',
            name: '预算(万/元)',
            axisLabel: {
                formatter: function (a: number) {
                    a = +a;
                    return isFinite(a) ? echarts.format.addCommas(+a / 100) : '';
                },
            },
        },
    ],
    dataZoom: [
        {
            show: true,
            start: 0,
            end: 100,
        },
        {
            type: 'inside',
            start: 0,
            end: 100,
        },
        {
            show: true,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 30,
            height: '80%',
            showDataShadow: false,
            left: '93%',
        },
    ],
    series: [
        {
            name: '2022预算',
            type: 'bar',
            data: [
                '24',
                '45',
                '41',
                '10',
                '25',
                '5',
                '14',
                '11',
                '9',
                '20',
                '45',
                '85',
                '42',
                '54',
                '51',
                '31',
                '38',
                '10',
                '84',
                '45',
            ],
        },
        {
            name: '2023预算',
            type: 'bar',
            data: [
                '45',
                '85',
                '42',
                '54',
                '51',
                '31',
                '38',
                '10',
                '84',
                '45',
                '24',
                '45',
                '41',
                '10',
                '25',
                '5',
                '14',
                '11',
                '9',
                '20',
            ],
        },
    ],
};
let myEchart = ref();
onMounted(() => {
    let myChart = echarts.init(myEchart.value);
    myChart.setOption(option);
});
</script>

<style lang="scss" scoped></style>
